<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播</title>
    <style>
        #silder{
            width: 600px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid  #56a5f1;
            position: relative;
            overflow: hidden;
        }
        .item{
            /* display: block; */
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            transition: left 0.7s ease-in-out;
            /* 轮播缓存时间 */
        }
        /* .item:nth-child(1){
            left: 0;
            可以使用这个设置第一个的图片。
        }*/
    
    </style>
</head>
<body>
    <div id="silder">
        <img class="item" src="./images/1.jpg" alt="">
        <img class="item" src="./images/2.jpg" alt="">
        <img class="item" src="./images/3.jpg" alt="">
        <img class="item" src="./images/4.jpg" alt="">
        <img class="item" src="./images/1.jpg" alt="">
    </div>

    <script>
        // 获取父容器的宽度。
         let sWidth=silder.clientWidth;
         //let imgs=document.getElementsByTagName('img');
        let imgs=document.querySelectorAll('.item');
        for(let index=0;index<imgs.length;index++){
            imgs[index].style.left= `${index*sWidth}px`;
            // imgs[index].style.left= index*sWidth +'px';
            //一次写多个样式：div.style.cssText=''
        }
        let pic=0;
        //计算如何播放
        function computed(){
            pic++;
            if(pic>imgs.length-1){
                pic=imgs.length-1
            }
            moveSlider();
        }
        //执行具体播放
       function moveSlider(){
        for(let index=0;index<imgs.length;index++){
            imgs[index].style.left= `${(index-pic)*sWidth}px`;
        }
   
        //最后一张图片
        if(pic==imgs.length-1){
            setInterval(function(){
                pic=0;
            for(let index=0;index<imgs.length;index++){
            imgs[index].style.left= `${index*sWidth}px`;
            imgs[index].style.transition='none';
           
            }

            setInterval(function(){
                for(let index=0;index<imgs.length;index++){
                imgs[index].style.transition='left 0.7s ease-in-out';
            }
            },100)
            },700)
        
        }
 
    }
        
        //间隔调用
        setInterval(() => {
            computed()
        }, 1000);
    </script>
</body>
</html>